<template>
  <div>
    <Card :list="cardlist" />

    <Charts @son="fn" />
  </div>
</template>

<script>
import Card from './components/Card.vue'
import Charts from './components/Charts.vue'
import { getHomeData } from '@/api/order.js'

export default {
  data() {
    return {
      cardlist: [
        {
          id: 1,
          name: 'totalOrder',
          icon: 'icon-wenjian',
          text: '总订单',
          color: '#1296db',
          num: ''
        },
        {
          id: 2,
          name: 'totalAmount',
          icon: 'icon-Dollar',
          text: '总销售额',
          color: '#d4237a',
          num: ''
        },
        {
          id: 3,
          name: 'todayOrder',
          icon: 'icon-renwu',
          text: '今日订单数',
          color: '#1296db',
          num: ''
        },
        {
          id: 4,
          name: 'totayAmount',
          icon: 'icon-renminbi',
          text: '今日销售额',
          color: '#1afa29',
          num: ''
        }
      ],
      sonData: {}
    }
  },
  components: {
    Card,
    Charts
  },
  created() {
    this.getDatas()
  },
  methods: {
    fn(o) {
      this.sonData = o
    },
    async getDatas() {
      const data = await getHomeData()
      this.cardlist.forEach(item => {
        item.num = data[item.name]
      })
      this.sonData.option.xAxis[0].data = data.xData
      this.sonData.option.series[0].data = data.orderData
      this.sonData.option.series[1].data = data.amountData
      this.sonData.myChart.setOption(this.sonData.option)
    }
  }
}
</script>

<style lang="less" scoped></style>
